<template>
  <div class="video-data-category page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="file-video" class="header-icon"></icon>
          <span class="header-title">视频数据分析</span>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <!-- 左侧区域 -->
              <div class="left-section">
                <!-- 上传数据类型 -->
                <div class="data-type-section">
                  <h3 class="section-title">上传数据类型</h3>
                  <div class="data-type-options">
                    <div class="data-type-option active">
                      <span>上课状态数据</span>
                      <div class="upload-box">
                        <span class="upload-text">选择文件并上传</span>
                        <el-button size="small" type="primary" @click="handleUploadClick('class')">上传</el-button>
                        <input ref="classUpload" type="file" accept="video/*" @change="handleFileChange('class')" style="display: none">
                      </div>
                    </div>
                    <div class="data-type-option">
                      <span>走路姿态数据</span>
                      <div class="upload-box">
                        <span class="upload-text">选择文件并上传</span>
                        <el-button size="small" type="primary" @click="handleUploadClick('walk')">上传</el-button>
                        <input ref="walkUpload" type="file" accept="video/*" @change="handleFileChange('walk')" style="display: none">
                      </div>
                    </div>
                    <div class="data-type-option">
                      <span>人脸识别数据</span>
                      <div class="upload-box">
                        <span class="upload-text">选择文件并上传</span>
                        <el-button size="small" type="primary" @click="handleUploadClick('face')">上传</el-button>
                        <input ref="faceUpload" type="file" accept="video/*" @change="handleFileChange('face')" style="display: none">
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 数据分析工具 -->
                <div class="analysis-tools">
                  <el-button type="primary" @click="handleAnalysis">数据分析工具</el-button>
                  <el-button type="info" @click="handleHistoryView">历史上传查看</el-button>
                </div>
              </div>

              <!-- 中间区域 -->
              <div class="middle-section">
                <!-- 同步学习交流 -->
                <div class="sync-learning-section">
                  <div class="section-header">
                    <h3 class="section-title">同步学习交流</h3>
                    <div class="video-info">
                      <span class="video-date">2023年10月15日 14:30:00</span>
                      <span class="video-location">教室: 教1</span>
                    </div>
                  </div>
                  <div class="video-preview">
                    <img :src="previewImage" alt="视频预览" class="preview-image">
                  </div>
                </div>

                <!-- 上课参与分析区 -->
                <div class="class-analysis-section">
                  <h3 class="section-title">上课参与分析区</h3>
                  <div class="analysis-inputs">
                    <div class="input-row">
                      <span class="input-label">学生姿态：</span>
                      <el-input v-model="analysisData.posture" placeholder="如：坐姿/站姿"></el-input>
                    </div>
                    <div class="input-row">
                      <span class="input-label">表达能力：</span>
                      <el-input v-model="analysisData.expression" placeholder="学生表达能力"></el-input>
                    </div>
                    <div class="input-row">
                      <span class="input-label">互动情况：</span>
                      <el-input v-model="analysisData.interaction" placeholder="互动情况描述"></el-input>
                    </div>
                  </div>
                  <div class="student-info">
                    <div class="info-row">
                      <span class="info-label">姓名：</span>
                      <span class="info-value">李明</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">学号：</span>
                      <span class="info-value">20230001</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">专业：</span>
                      <span class="info-value">计算机科学与技术</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">班级：</span>
                      <span class="info-value">2023级1班</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧区域 -->
              <div class="right-section">
                <!-- 人脸识别数据 -->
                <div class="face-recognition-section">
                  <h3 class="section-title">人脸识别数据</h3>
                  <div class="face-list">
                    <div v-for="(person, index) in faceData" :key="index" class="face-item">
                      <div class="face-avatar">
                        <img :src="person.avatar" alt="头像">
                      </div>
                      <div class="face-info">
                        <div class="face-name">{{ person.name }}</div>
                        <div class="face-status" :class="person.status">{{ person.statusText }}</div>
                      </div>
                      <el-button size="mini" type="primary" @click="handleViewDetail(person)">查看详情</el-button>
                    </div>
                  </div>
                </div>

                <!-- 筛选区 -->
                <div class="filter-section">
                  <h3 class="section-title">筛选区</h3>
                  <div class="filter-form">
                    <div class="filter-item">
                      <label>人员姓名筛选</label>
                      <el-input v-model="filters.name" placeholder="请输入姓名"></el-input>
                    </div>
                    <div class="filter-item">
                      <label>日期</label>
                      <el-date-picker v-model="filters.date" type="date" placeholder="选择日期"></el-date-picker>
                    </div>
                    <div class="filter-item">
                      <label>视频类型</label>
                      <el-select v-model="filters.type" placeholder="请选择">
                        <el-option label="上课状态" value="class"></el-option>
                        <el-option label="走路姿态" value="walk"></el-option>
                        <el-option label="人脸识别" value="face"></el-option>
                      </el-select>
                    </div>
                    <div class="filter-item">
                      <label>分析结果</label>
                      <el-slider v-model="filters.analysisScore" :min="0" :max="100"></el-slider>
                    </div>
                    <div class="filter-item">
                      <label>置信度</label>
                      <el-slider v-model="filters.confidence" :min="0" :max="100"></el-slider>
                    </div>
                    <div class="filter-actions">
                      <el-button type="primary" @click="handleFilter">筛选数据</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'VideoDataCategory',
  data() {
    return {
      // 上传文件相关
      uploadedFiles: {
        class: null,
        walk: null,
        face: null
      },

      // 文件ID存储
      fileIds: {
        class: null,
        walk: null,
        face: null
      },

      // 预览图片
      previewImage: require('@/assets/logo.png'),

      // 分析数据
      analysisData: {
        posture: '坐姿端正',
        expression: '表达流畅，逻辑清晰',
        interaction: '积极参与课堂讨论'
      },

      // 人脸识别数据
      faceData: [
        {
          id: 1,
          name: '张三',
          avatar: require('@/assets/logo.png'),
          status: 'active',
          statusText: '在线'
        },
        {
          id: 2,
          name: '李四',
          avatar: require('@/assets/logo.png'),
          status: 'warning',
          statusText: '注意力不集中'
        },
        {
          id: 3,
          name: '王五',
          avatar: require('@/assets/logo.png'),
          status: 'active',
          statusText: '在线'
        },
        {
          id: 4,
          name: '赵六',
          avatar: require('@/assets/logo.png'),
          status: 'offline',
          statusText: '离线'
        }
      ],

      // 筛选条件
      filters: {
        name: '',
        date: '',
        type: 'class',
        analysisScore: 70,
        confidence: 80
      }
    }
  },
  methods: {
    // 处理上传按钮点击
    handleUploadClick(type) {
      this.$refs[`${type}Upload`].click();
    },

    // 处理文件选择变化
    handleFileChange(type, event) {
      const file = event.target.files[0];
      if (file) {
        this.uploadedFiles[type] = file;
        this.uploadFile(type, file);
      }
    },

    // 上传文件到服务器
    uploadFile(type, file) {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('type', type);

      // 调用API上传文件
      this.$message.info('开始上传视频文件...');

      // 调用API上传视频文件
      this.$unstructuredapi.uploadVideoFile(formData).then(res => {
        this.$message.success('上传成功');

        // 如果是上课状态视频，更新预览图
        if (type === 'class' && res.data && res.data.previewUrl) {
          this.previewImage = res.data.previewUrl;
        }

        // 保存文件ID用于后续分析
        if (res.data && res.data.fileId) {
          this.fileIds = this.fileIds || {};
          this.fileIds[type] = res.data.fileId;
        }
      }).catch(err => {
        this.$message.error('上传失败: ' + (err.message || '未知错误'));
      });
    },

    // 处理分析按钮点击
    handleAnalysis() {
      if (!this.uploadedFiles.class && !this.uploadedFiles.walk && !this.uploadedFiles.face) {
        this.$message.warning('请先上传视频文件');
        return;
      }

      this.$message.info('开始分析视频数据...');

      // 确定要分析的视频类型
      let type = 'class';
      let fileId = null;

      if (this.fileIds && this.fileIds.class) {
        type = 'class';
        fileId = this.fileIds.class;
      } else if (this.fileIds && this.fileIds.walk) {
        type = 'walk';
        fileId = this.fileIds.walk;
      } else if (this.fileIds && this.fileIds.face) {
        type = 'face';
        fileId = this.fileIds.face;
      }

      if (!fileId) {
        this.$message.warning('无法获取文件ID，请重新上传');
        return;
      }

      // 调用API分析视频
      this.$unstructuredapi.analyzeVideoFile({
        fileId: fileId,
        type: type
      }).then(res => {
        this.$message.success('分析完成');

        // 更新分析结果
        if (res.data && res.data.analysis) {
          if (type === 'class') {
            this.analysisData = {
              posture: res.data.analysis.posture || '坐姿端正',
              expression: res.data.analysis.expression || '表达流畅，逻辑清晰',
              interaction: res.data.analysis.interaction || '积极参与课堂讨论'
            };
          }

          // 如果是人脸识别类型，更新人脸数据
          if (type === 'face' && res.data.faceData) {
            this.faceData = res.data.faceData;
          }
        }
      }).catch(err => {
        this.$message.error('分析失败: ' + (err.message || '未知错误'));
      });
    },

    // 查看历史上传
    handleHistoryView() {
      this.$message.info('查看历史上传功能将在后续版本中提供');
    },

    // 查看详情方法已移至下方

    // 处理筛选
    handleFilter() {
      this.$message.info('开始筛选数据...');

      // 调用API筛选视频数据
      this.$unstructuredapi.filterVideoData(this.filters).then(res => {
        this.$message.success('筛选完成');

        // 更新筛选结果
        if (res.data && res.data.faceData) {
          this.faceData = res.data.faceData;
        } else if (res.data && res.data.results) {
          // 如果返回的是通用结果格式
          this.faceData = res.data.results.map(item => {
            return {
              id: item.id,
              name: item.name,
              avatar: item.avatar || require('@/assets/logo.png'),
              status: this.getStatusFromScore(item.score),
              statusText: this.getStatusTextFromScore(item.score)
            };
          });
        } else {
          // 如果没有返回数据，显示提示
          this.$message.warning('未找到符合条件的数据');
        }
      }).catch(err => {
        this.$message.error('筛选失败: ' + (err.message || '未知错误'));

        // 本地筛选作为备选方案
        if (this.filters.name) {
          this.faceData = this.faceData.filter(item => item.name.includes(this.filters.name));
        }
      });
    },

    // 根据分数获取状态
    getStatusFromScore(score) {
      if (!score && score !== 0) return 'offline';
      if (score >= 80) return 'active';
      if (score >= 60) return 'warning';
      return 'offline';
    },

    // 根据分数获取状态文本
    getStatusTextFromScore(score) {
      if (!score && score !== 0) return '离线';
      if (score >= 80) return '在线';
      if (score >= 60) return '注意力不集中';
      return '离线';
    },

    // 查看详情
    handleViewDetail(person) {
      this.$message.info(`查看${person.name}的详细信息`);

      // 如果有ID，调用API获取详情
      if (person.id) {
        this.$unstructuredapi.getVideoFileDetail(person.id)
          .then(res => {
            if (res.data) {
              // 这里可以显示详情弹窗或跳转到详情页
              // this.$router.push(`/video-data-detail/${person.id}`);
            }
          })
          .catch(err => {
            this.$message.error('获取详情失败: ' + (err.message || '未知错误'));
          });
      }
    }
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.video-data-category {
  .module-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .header-icon {
        font-size: 24px;
        color: #68d8fe;
        margin-right: 10px;
      }

      .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #68d8fe;
      }
    }

    .module-content {
      flex: 1;

      .content-box {
        height: 100%;
        padding: 20px;
      }

      .content-wrapper {
        height: 100%;
        display: flex;
        gap: 20px;

        // 左侧区域样式
        .left-section {
          width: 25%;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .data-type-section {
            background-color: rgba(14, 29, 52, 0.7);
            border-radius: 4px;
            padding: 15px;

            .section-title {
              color: #68d8fe;
              font-size: 16px;
              margin-bottom: 15px;
              border-bottom: 1px solid rgba(104, 216, 254, 0.3);
              padding-bottom: 8px;
            }

            .data-type-options {
              display: flex;
              flex-direction: column;
              gap: 15px;

              .data-type-option {
                background-color: rgba(20, 40, 70, 0.5);
                border-radius: 4px;
                padding: 10px;
                color: #d3d6dd;

                &.active {
                  border-left: 3px solid #68d8fe;
                  background-color: rgba(30, 60, 100, 0.5);
                }

                .upload-box {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-top: 8px;

                  .upload-text {
                    font-size: 12px;
                    color: #a0a0a0;
                  }
                }
              }
            }
          }

          .analysis-tools {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .el-button {
              width: 100%;
            }
          }
        }

        // 中间区域样式
        .middle-section {
          width: 40%;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .sync-learning-section {
            background-color: rgba(14, 29, 52, 0.7);
            border-radius: 4px;
            padding: 15px;

            .section-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;

              .section-title {
                color: #68d8fe;
                font-size: 16px;
              }

              .video-info {
                font-size: 12px;
                color: #a0a0a0;

                .video-date {
                  margin-right: 10px;
                }
              }
            }

            .video-preview {
              width: 100%;
              height: 200px;
              background-color: #000;
              border-radius: 4px;
              overflow: hidden;

              .preview-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }

          .class-analysis-section {
            background-color: rgba(14, 29, 52, 0.7);
            border-radius: 4px;
            padding: 15px;
            flex: 1;

            .section-title {
              color: #68d8fe;
              font-size: 16px;
              margin-bottom: 15px;
              border-bottom: 1px solid rgba(104, 216, 254, 0.3);
              padding-bottom: 8px;
            }

            .analysis-inputs {
              margin-bottom: 20px;

              .input-row {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                .input-label {
                  width: 80px;
                  color: #d3d6dd;
                }

                .el-input {
                  flex: 1;
                }
              }
            }

            .student-info {
              background-color: rgba(20, 40, 70, 0.5);
              border-radius: 4px;
              padding: 15px;

              .info-row {
                display: flex;
                margin-bottom: 8px;

                .info-label {
                  width: 60px;
                  color: #a0a0a0;
                }

                .info-value {
                  color: #d3d6dd;
                }
              }
            }
          }
        }

        // 右侧区域样式
        .right-section {
          width: 35%;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .face-recognition-section {
            background-color: rgba(14, 29, 52, 0.7);
            border-radius: 4px;
            padding: 15px;

            .section-title {
              color: #68d8fe;
              font-size: 16px;
              margin-bottom: 15px;
              border-bottom: 1px solid rgba(104, 216, 254, 0.3);
              padding-bottom: 8px;
            }

            .face-list {
              display: flex;
              flex-direction: column;
              gap: 10px;

              .face-item {
                display: flex;
                align-items: center;
                background-color: rgba(20, 40, 70, 0.5);
                border-radius: 4px;
                padding: 10px;

                .face-avatar {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 10px;

                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
                }

                .face-info {
                  flex: 1;

                  .face-name {
                    color: #d3d6dd;
                    font-size: 14px;
                    margin-bottom: 4px;
                  }

                  .face-status {
                    font-size: 12px;

                    &.active {
                      color: #67C23A;
                    }

                    &.warning {
                      color: #E6A23C;
                    }

                    &.offline {
                      color: #909399;
                    }
                  }
                }

                .el-button {
                  margin-left: 10px;
                }
              }
            }
          }

          .filter-section {
            background-color: rgba(14, 29, 52, 0.7);
            border-radius: 4px;
            padding: 15px;
            flex: 1;

            .section-title {
              color: #68d8fe;
              font-size: 16px;
              margin-bottom: 15px;
              border-bottom: 1px solid rgba(104, 216, 254, 0.3);
              padding-bottom: 8px;
            }

            .filter-form {
              .filter-item {
                margin-bottom: 15px;

                label {
                  display: block;
                  color: #d3d6dd;
                  margin-bottom: 5px;
                }

                .el-input,
                .el-date-picker,
                .el-select {
                  width: 100%;
                }
              }

              .filter-actions {
                margin-top: 20px;
                text-align: center;

                .el-button {
                  width: 80%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
